<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AiriDesuki</title>

    <style>
        body
        {
            font-family: Microsoft YaHei Light, Microsoft YaHei, Microsoft JhengHei, SimHei, SimSun;
        }
        button
        {
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 1em;
            color: white;
            padding: 10px 25px 30px 25px;
            border: none;
            display: -webkit-box;
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            transition: all 0.2s;
            margin: 3px;
            text-align: center;
        }
        button:hover
        {
            background-color: rgba(0, 0, 0, 0.6);
        }
        button:active
        {
            background-color: rgba(0, 0, 0, 0.8);
            background-image: none;
        }
    </style>

    <script>
        function luiScreenInit()
        {
            setMCTitle("佐仓爱里真可爱");
            
            getServerInfo
            (
                {
                    host:"127.0.0.1",
                    port:23333,
                    callback:"serverInfo"
                }
            );
        }
        function serverInfo(info)
        {
            var infoS = document.getElementById("infoS");
            infoS.innerText = 
                "服务端版本：" + info.serverInfo.version.name + "\n" +
                "玩家：" + info.serverInfo.players.online + "/" + info.serverInfo.players.max +  "\n" +
                "Ping: " + info.ping + "ms";
        }
        function connectToMyServer()
        {
            connectToServer
            (
                {
                    name:"myServer", 
                    ip:"127.0.0.1:23333"
                }
            )
        }
        function luiScreenRemoved()
        {
            connectToMyServer();
        }
    </script>
</head>
<body style="background-image: url(airi.jpg); background-repeat: no-repeat; background-position: top center;">
    <div style="text-align: center;">
        <button style="position: absolute; left: 50px;" onclick="closeGui()">返回</button>
        <button style="position: absolute; top: 35%; left: 45%;" onclick="connectToMyServer()">进入服务器</button>
        <p id="infoS" style="position: absolute; color: white; top:55%; left: 40%;"></p>
    </div>
</body>
</html>